{extend name="Index/index" /}
{block name="main"}
<!-- Start right content -->

<!---->

<div class="content-page">

    <div class="content">

        <div class="page-heading">
            <h1><i class='fa fa-table'></i>后台用户管理</h1>
            <h3>用户列表</h3>
        </div>

        <div class="row">

            <div class="col-md-12">
                <div class="widget">
                    <div class="widget-header transparent">
                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">搜索
                        </button>

                        <!-- Modal -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">

                                    <form action="{:url('admin/user/search')}" method="post">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">搜索用户</h4>
                                        </div>
                                        <div class="modal-body">
                                            <span style="color: black;">用户名:<input type="text" name="search" placeholder="search..."></span>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                            <button type="submit" class="btn btn-success">确定</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-content">
                        <div class="table-responsive">
                            <table data-sortable class="table">
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>所属角色</th>
                                    <th>操作</th>
                                    {volist name="list" id="v"}
                                    <tr>
                                        <td>{$v.id}</td>
                                        <td>{$v.username}</td>
                                        <td>
                                            {volist name="v.role" id="val"}
                                                <span style="color:#999">{$val}</span>
                                                &nbsp;
                                            {/volist}
                                        </td>
                                        <td>
                                            <!--<a href="{:url('admin/user/edit',['id'=>$v['id']])}" class="btn btn-warning ">修改</a>-->
                                            <button class="btn btn-warning up-btn" data-id="{$v.id}" data-toggle="modal" data-target="#myModal-edit">修改
                                            </button>

                                            <button class="btn btn-danger delete-btn" data-id="{$v.id}">删除</button>
                                            <a href="{:url('admin/user/rolelist',['id'=>$v['id']])}" class="btn btn-success" data-dismiss="modal">分配角色</a>
                                            <!--<button class="btn btn-success uprole-btn" data-id="{$v.id}" data-toggle="modal" data-target="#myModal-role">分配角色-->
                                            <!--</button>-->
                                        </td>
                                    </tr>
                                <!-- Modal 修改用户名-->
                                        <div class="modal fade" id="myModal-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                        <h4 class="modal-title" id="myModalLabel">修改用户名</h4>
                                                    </div>
                                                    <form>
                                                        <input type="hidden" class="update-id" value="">
                                                        <div class="modal-body">
                                                            用户名:<input type="input" class="up-name" name="username"  value="">
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                                            <button type="button" class="btn btn-success update-btn">确认</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                <!-- end Modal -->
                                <!-- Modal 分配角色-->
                                <!--<div class="modal fade" id="myModal-role" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
                                    <!--<div class="modal-dialog" role="document">-->
                                        <!--<div class="modal-content">-->
                                            <!--<div class="modal-header">-->
                                                <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
                                                <!--<h4 class="modal-title" id="myModalLabel">分配角色</h4>-->
                                            <!--</div>-->
                                            <!--<form class="update-btn" method="post">-->
                                                <!--<div class="modal-body">-->
                                                    <!--用户名:<input type="input" class="up-name" id="username" name="username"  value="">-->
                                                <!--</div>-->
                                                <!--<div class="modal-footer">-->
                                                    <!--<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>-->
                                                    <!--<button type="button" data-id="{$v.id}" class="btn btn-success update-btn">确认</button>-->
                                                <!--</div>-->
                                            <!--</form>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                                <!-- end Modal -->
                                    {/volist}
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-heading">
            <h1><i class='fa fa-table'></i>前台用户管理</h1>
            <h3>用户列表</h3>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="widget">
                    <div class="widget-content">
                        <div class="table-responsive">
                            <table data-sortable class="table">
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>操作</th>
                                    {volist name="lists" id="v"}
                                <tr>
                                    <td>{$v.user_id}</td>
                                    <td>{$v.username}</td>
                                    <td>
                                        <button class="btn btn-danger del-btn" data-id="{$v.user_id}">删除</button>
                                    </td>
                                </tr>
                                {/volist}
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            {$lists->render()}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End content here -->
    <!-- ============================================================== -->

</div>

<!-- End right content -->
{js href="/static/index/js/jquery.min.js"}

    <script>
        //后台用户删除
        $(function () {
            // 触发删除用户
            $('.delete-btn').click(function () {
                var ac_id = $(this).attr('data-id');
//                 console.log('删除操作,ID为: ' + ac_id);
                if (confirm('您确定要 [ 删 除 ] 该用户吗?')) {
                    var obj = $(this).parents('tr');
                    deleteAjax(ac_id, obj); // 执行AJAX删除
                }
            });
        });
        //删除用户
        function deleteAjax(id, obj) {
            $.ajax({
                type: 'delete',
                url: '/admin/user/delete/id/' + id + '.html',
                dataType : 'json',
                success : function (data){
                    if (data.status) {
                        toastr.success(data.info);
                        obj.remove();
                    } else {
                        toastr.error(data.info);
                    }
                },
                error : function () {
                    alert('AJAX执行失败!');
                }
            });
        }

        //前台用户删除
        $(function () {
            // 触发删除用户
            $('.del-btn').click(function () {
                var ac_id = $(this).attr('data-id');
                //                 console.log('删除操作,ID为: ' + ac_id);
                if (confirm('您确定要 [ 删 除 ] 该用户吗?')) {
                    var obj = $(this).parents('tr');

                    delAjax(ac_id, obj); // 执行AJAX删除

                }
            });
        });
        //删除用户
        function delAjax(id, obj) {
            $.ajax({
                type: 'delete',
                url: '/admin/user/del/id/' + id + '.html',
                dataType : 'json',
                success : function (data){
                    if (data.status) {
                        toastr.success(data.info);
                        obj.remove();
                    } else {
                        toastr.error(data.info);
                    }
                },
                error : function () {
                    alert('AJAX执行失败!');
                }
            });
        }

        //修改用户-传递值
        $(function () {
            $('.up-btn').click(function () {
                var ac_id = $(this).attr('data-id');
                //
                //             console.log('删除操作,ID为: ' + ac_id);
                var info = 'id'+'='+ac_id;

                $.ajax({
                    type : 'post',
                    url : '/admin/user/edit/',
                    data : info,
                    dataType : 'json',
                    success:function(data){
                       $('.up-name').val(data.username);
                       $('.update-id').val(data.id);
                        //                    if(data.status){
                        //                        toastr.success(data.info);
                        //                        console.log(data);die;
                        //                    }
                    },
                    error : function () {
                        alert('AJAX执行失败!');
                    }
                });
            });
        });
//        /admin/user/edit/id/12.html
//        /admin/user/update/id/12.html
        //修改用户
        $(function () {
            $('.update-btn').click(function () {
                var ac_id = $('.update-id').val();
                //             console.log('删除操作,ID为: ' + ac_id);
                var list = $('.up-name').val();

                updateAjax(ac_id,list);
            });
        });

        function updateAjax(id,list){

            var info = 'id'+'='+id + '&' + 'list=' + list;
                alert(info);
//            $.ajax({
//                type : 'post',
//                url : '/admin/user/update/',
//                data : info,
//                dataType : 'json',
//                success:function(data){
//                    if(data.status){
//                        toastr.success(data.info);
//                        setTimeout(function (){window.location.reload();},1000);
//
//                    }else{
//                        toastr.error(data.info);
//                    }
//                },
//                error : function () {
//                    alert('AJAX执行失败!');
//                }
//            });
        }

//        //分配角色
//        $(function(){
//            $('.uprole-btn').click(function (){
//                var uid = $(this).attr('data-id');
//                console.log(uid);
//                uproleAjax(uid);
//            });
//        });
//        function uproleAjax(id){
//            var info = 'id'+'='+id;
//            $.ajax({
//                type : 'post',
//                url : '/admin/user/rolelist/',
//                data : info,
//                dataType : 'json',
//                success:function(data){
//                    if(data.status){
//                        toastr.success(data.info);
//                        setTimeout(function (){window.location.reload();},1000);
//
//                    }else{
//                        toastr.error(data.info);
//                    }
//                },
//                error : function () {
//                    alert('AJAX执行失败!');
//                }
//            });
//        }
        toastr.options = {
            closeButton: true,// 是否显示关闭按钮
            progressBar: true,// 实现显示计时条
            timeOut: "1000",// 自动关闭时间
            positionClass: "toast-top-right"// 提示位置
            // positionClass: "toast-top-full-width"// 提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
        };
    </script>
{/block}